<template>
  <div class="warpc">
    <div class="img">
      <img :src="objfood1.img2" alt="" />
      <div class="foodtop">
        <span class="icon" @click="fungo()"
          ><van-icon name="arrow-left" />
        </span>
        <div>
          <span class="icon icon1"> <van-icon name="star-o" /></span>
          <span class="icon icon1"><van-icon name="share-o" /></span>

          <span class="icon icon1"><van-icon name="ellipsis" /></span>
        </div>
      </div>
    </div>
    <div class="title">
      <div class="fd">
        <div class="foodname">{{ objfood1.class11 }}</div>
        <span class="foodprice">{{ objfood1.price11 }}</span>
      </div>
      <div class="twoline">
        <div class="top">TOP 1</div>
        <div class="tjfood">推荐菜</div>
        <div class="nearly">近三个月人气推荐</div>
      </div>
      <div class="fd">
        <span class="pj">"青酱浓郁，虾仁鲜嫩，松子香脆"</span>
        <div class="mass"><van-icon name="records" />完善信息</div>
      </div>
    </div>
    <div class="linebox"></div>
    <div class="foodcon">
      <div class="foodcontitle">
        <span class="tuan">团</span> <span>包含该菜的优惠套餐</span>
      </div>
      <div class="decont">
        <div class="text">
          <!-- {{ this.$route.query.id }} -->
          <div><img :src="objfood1.img4" alt="" /></div>
          <div class="name-content">
            <p>{{ objfood1.name }}</p>
            <p class="gray">周一至周日 | 包厢免费使用 | 免预约</p>
            <p class="pricetuan">
              <span class="newp">￥{{ objfood1.newp1 }}</span>
              <span class="oldp">￥{{ objfood1.old1 }}</span>
            </p>
          </div>
        </div>
        <div class="ys">
          <span> 已售12</span>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="linebox"></div>
    <div class="foodassess">
      <div class="foodassesstitle">
        <div>该菜的评价（53）</div>
        <van-icon name="arrow" class="icon" />
      </div>
    </div>
    <div class="pjcontbox">
      <div class="bixbox" v-for="(v, i) in arr" :key="i">
        <div class="pjcont">
          <div class="left">
            <img @click="funhomepage()" :src="v.imgsrc1" alt="" />
          </div>
          <div class="right">
            <div class="pjname">{{ v.name }}</div>
            <div class="data">{{ v.data }}</div>
            <div class="startdf">
              打分
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
              <img class="start" src="mayingshuang/imgs/star.jpg" alt="" />
            </div>
            <p class="page">
              {{ v.p }}
            </p>
            <div class="pjpic">
              <img :src="v.imgsrc1" alt="" />
              <img :src="v.imgsrc2" alt="" />
            </div>
          </div>
        </div>
        <div class="down">
          <p class="le" v-on:click="changecolor()" ref="coloror">
            <span class="iconfont icon-weixiao"></span>有帮助
          </p>
          <p class="ri">
            <span class="iconfont icon-pingjia"></span
            ><van-icon name="share-o" class="icon icon2" />
          </p>
        </div>
        <div class="linec"></div>
      </div>
    </div>
    <div class="foodlast"></div>
    <div class="bottombar">
      <div>
        <img src="chenkong/imgs/usk/3.gif" alt="" />
        <p>9</p>
      </div>
      <div class="linebottom"></div>
      <div>
        <img src="chenkong/imgs/swipe/other/zp.gif" alt="" />
        <p>传照片</p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      arr: [],
      objfood1: [],
    };
  },
  mounted() {
    let num = this.$route.query.foodid;

    axios.request("http://localhost:8889/Sevaluateck").then((ok) => {
      this.arr = ok.data;
    });
    axios.request("http://localhost:8889/cktc").then(({ data }) => {
      // console.log(ok)
      this.objfood1 = data[num];
      // console.log(this.objfood1.img1);
    });
  },
  methods: {
    fungo() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="scss" scoped>
.warpc {
  width: 100%;
  .img {
    width: 100%;
    img {
      //   height: 100vw;
      width: 100vw;
    }
    .foodtop {
      position: absolute;
      top: 6.133vw;
      width: 100%;
      //   margin: auto;
      //   background: green;
      display: flex;
      justify-content: space-between;
      .icon {
        // background: #47474f;
        font-size: 6.4vw;
        color: #fff;
        padding-left: 1.333vw;
      }
      .icon1 {
        padding-right: 3vw;
      }
    }
  }
  .title {
    width: 95%;
    margin: auto;
    // background: green;
    .fd {
      display: flex;
      justify-content: space-between;
      > div {
        padding: 2.667vw 0;
        line-height: 5.6vw;
      }
      .foodname {
        font-weight: bold;
      }
      .foodprice {
        font-weight: bold;
        line-height: 9.6vw;
      }
      .pj {
        font-size: 2.667vw;
        line-height: 10.6vw;
      }
      .mass {
        font-size: 2.667vw;
        width: 24vw;
        height: 2.4vw;
        text-align: center;
        border: 1px solid #d3d3d3;
        border-radius: 999rem;
        line-height: 2.4vw;
      }
    }
    .twoline {
      font-size: 2.667vw;
      display: flex;
      justify-content: flex-start;
      .top {
        line-height: 5.6vw;
        width: 13.333vw;
        font-weight: bolder;
        color: #fff;
        // margin: auto;
        background: #b52c05;
      }
      .tjfood {
        width: 61px;
        line-height: 5.6vw;
        text-align: center;
        color: #d85348;
        background: #ffe9e3;
      }
      .nearly {
        background: #f8f6f7;
        line-height: 5.6vw;
        margin-left: 1.067vw;
        width: 26.867vw;
        text-align: center;
      }
    }
  }
  .linebox {
    width: 100%;
    height: 2.133vw;
    background: #f6f6f6;
  }
  .foodcon {
    width: 95%;
    height: 100%;
    margin: auto;

    .foodcontitle {
      padding: 4.267vw 0;
      .tuan {
        font-size: 12px;
        color: #fff;
        padding: 0.8vw;
        background: #e4602d;
      }
    }
    .decont {
      justify-content: space-between;
      display: flex;
    }
    .text {
      // margin: auto;
      display: flex;
      justify-content: space-between;
      line-height: 5.333vw;
      height: 20.8vw;
      img {
        margin-top: 2.133vw;
        width: 16vw;
      }
      .name-content {
        font-size: 2.667vw;
        padding: 2.667vw 0 0 2.667vw;
        .gray {
          color: #868686;
        }
        .pricetuan {
          .newp {
            color: #e4602d;
          }
          .oldp {
            text-decoration: line-through;
            color: #868686;
          }
        }
      }
    }
    .ys {
      text-align: left;
      margin: auto 0;
      color: #868686;
      font-size: 2.667vw;
    }
  }
  .foodassess {
    width: 95%;
    margin: auto;
    // background: green;
  }
  .foodassesstitle {
    display: flex;
    justify-content: space-between;
    > div {
      font-weight: 550;
      line-height: 12.8vw;
    }
    .icon {
      line-height: 12.8vw;
    }
  }
  .pjcontbox {
    width: 100%;
    .down {
      width: 91.733vw;
      margin: auto;
      justify-content: space-between;
      font-size: 2.667vw;
      display: flex;
      .le {
        width: 17.333vw;
        display: flex;
        justify-content: space-around;
        border: 0.267vw solid grey;
        border-radius: 2.667vw;
        p {
          font-size: 4.8vw;
          width: 5.333vw;
          height: 8vw;
        }
      }
      .ri {
        span {
          margin: 1.333vw;
        }
      }
    }
    .pjcont {
      margin: auto;
      width: 95%;
      display: flex;
      // justify-content: space-around;
      padding-bottom: 2.133vw;
      border-bottom: 0.267vw solid #f7f7f7;
      margin-top: 4vw;
    }
    .left {
      img {
        width: 10.667vw;
        border-radius: 50%;
      }
    }
    .right {
      margin-left: 1.6vw;
      font-size: 2.667vw;
      line-height: 5.333vw;
      .pjname {
        color: #899396;
      }
      .data {
        color: #999999;
      }
      .startdf {
        img {
          width: 3.733vw;
          vertical-align: middle;
        }
      }
      .page {
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .pjpic {
        margin-top: 2.667vw;
        img {
          width: 26.667vw;
        }
      }
    }
  }
  .foodlast {
    height: 17.6vw;
  }
  .bottombar {
    height: 17.6vw;

    border-top: 0.267vw solid #e9e9e9;
    width: 100%;
    background: #fff;
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .linebottom {
      height: 5.333vw;
      width: 0.267vw;
      background: #e8e8e8;
    }
    > div {
      margin: auto;
      text-align: center;
    }
  }
}
</style>